table{
    border-collapse: collapse;    
}
caption{
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: left;
}
.table{
    width: 100%;
    th{
        height: 40px;
        line-height: 40px; 
        background-color: @table-thead-color;
    }
    td{
        height: 40px;
        line-height: 20px;
        padding: 5px;
        text-align: center;
        border-top: solid 1px @table-border-color;
    }
}
.table-bordered{
    th, td{
        border:solid 1px @table-border-color;  
    }
}
.table-striped{
    tbody tr:nth-of-type(odd){
        background-color: @table-bg-accent;
    }
}
.table-hover{
    tbody tr:hover{
        background-color: @table-bg-hover;
    }
}

.dataTables_wrapper{
    .dataTables_length{
        float: left;
        label > select{
            height: 25px;
            border:solid 1px @table-border-color;
        }
    }
    .dataTables_filter{
        float: right;
        label > input{
            height: 25px;
            margin-left: 10px;
            border:solid 1px @table-border-color;
        }
    }
    .dataTables_length, .dataTables_filter{
        height: 45px;
        padding: 10px 0;
    }
    .dataTables{
        thead th{
            padding: 0 18px;
            &.sorting{
                .sorting-img(~"sort_both.png");
            }
            &.sorting_asc{
                .sorting-img(~"sort_asc.png");
            }
            &.sorting_desc {
                .sorting-img(~"sort_desc.png");
            }
        }
    }
}
.dataTables_info{
    float: left;
}
.dataTables_paginate{
    float: right;
    margin-bottom: 20px; 
    a{
        padding: 2px 7px;
        margin-left: 10px;
        border: solid 1px @table-border-color;
        outline: 0;
        cursor: pointer;
        &:hover{
            background-color: @table-bg-hover;
        }
        &.current{
            background-color: #333;
            color: #fff;
        } 
    }
}

.table-row-varian(active; @table-bg-active);
.table-row-varian(success; @state-success-bg);
.table-row-varian(info; @state-info-bg);
.table-row-varian(warning; @state-warning-bg);
.table-row-varian(danger; @state-danger-bg);

.table-row-varian(@state; @background){
    .table > tbody > tr{
        > th.@{state}, > td.@{state}, &.@{state} > th, &.@{state} > td{
            background-color: @background;
        }
    }
}
.sorting-img(@background){
    background-image: url("../../vendor/images/@{background}");
    background-repeat: no-repeat;
    background-position: center right;
}
